<!DOCTYPE html>
<html>
<head>
    <title>历史</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <#--样式-->
    <link rel="stylesheet" media="screen" href="${request.contextPath}/css/style.css">
    <#--layui-->
    <link rel="stylesheet" media="screen" href="${request.contextPath}/layui/css/layui.css">

</head>
<body >





    <div class="content" >



       <div >
           <#--月亮放置区-->
           <div class="light" style="cursor:pointer;" onclick="window.location.href = '/history/'">
           </div>

           <hr class="line-left">
           <hr class="line-right">

           <div class="main">
               <h1 class="title">修改事件集合 | 历史时期</h1>
           </div>




           <div class="textContent" style="padding-bottom: 300px;">

               <div style="width: 900px;">


                   <form class="layui-form" >
                        <div class="layui-form-item">
                           <label class="layui-form-label">历史时期</label>
                           <div class="layui-input-block" style="width: 300px;display: inline-block;">
                               <select name="waitName" id="waitName" lay-filter="aihao" lay-search>
                                   <option value="">请选择历史时期</option>
                                   <#if periodList??>
                                       <#list periodList as period>
                                           <#if period??>
                                               <option value="${period.id!''}">${period.name!''}</option>
                                           </#if>
                                       </#list>
                                   </#if>
                               </select>
                           </div>
                            <button class="layui-btn" type="button" onclick="selectPeriod()">搜索</button>

                        </div>


                   </form>




                   <br/>
                   <br/>
                   <br/>
                   <hr class="layui-bg-orange">



                   <form class="layui-form" id="formPeriod" style="display:none;">
                       <input required lay-verify="required" type="hidden" name="id">


                       <div class="layui-form-item">
                           <label class="layui-form-label">历史主线开始</label>
                           <div class="layui-input-block">
                               <select name="historyIdStart" id="historyIdStart" lay-filter="aihao" lay-search>
                                   <option value="">请选择历史主线</option>
                                   <#if historyMainList??>
                                       <#list historyMainList as historyMain>
                                           <#if historyMain??>
                                               <#if historyMain.ad == 1>
                                                   <#if historyMain.accuracy == 1>
                                                       <option value="${historyMain.id!''}">约 公元元年</option>
                                                   <#else >
                                                       <option value="${historyMain.id!''}">公元元年</option>
                                                   </#if>

                                               <#elseif historyMain.ad < 0>
                                                   <#if historyMain.accuracy == 1>
                                                       <option value="${historyMain.id!''}">约 公元前 ${historyMain.ad!''} 年</option>
                                                   <#else >
                                                       <option value="${historyMain.id!''}">公元前 ${historyMain.ad!''} 年</option>
                                                   </#if>

                                               <#else >
                                                   <#if historyMain.accuracy == 1>
                                                       <option value="${historyMain.id!''}">约 公元 ${historyMain.ad!''} 年</option>
                                                   <#else >
                                                       <option value="${historyMain.id!''}">公元 ${historyMain.ad!''} 年</option>
                                                   </#if>

                                               </#if>
                                           </#if>
                                       </#list>
                                   </#if>
                               </select>
                           </div>
                       </div>

                       <div class="layui-form-item">
                           <label class="layui-form-label">历史主线结束</label>
                           <div class="layui-input-block">
                               <select name="historyIdEnd" id="historyIdEnd" lay-filter="aihao" lay-search>
                                   <option value="">请选择历史主线</option>
                                   <#if historyMainList??>
                                       <#list historyMainList as historyMain>
                                           <#if historyMain??>
                                               <#if historyMain.ad == 1>
                                                   <#if historyMain.accuracy == 1>
                                                       <option value="${historyMain.id!''}">约 公元元年</option>
                                                   <#else >
                                                       <option value="${historyMain.id!''}">公元元年</option>
                                                   </#if>

                                               <#elseif historyMain.ad < 0>
                                                   <#if historyMain.accuracy == 1>
                                                       <option value="${historyMain.id!''}">约 公元前 ${historyMain.ad!''} 年</option>
                                                   <#else >
                                                       <option value="${historyMain.id!''}">公元前 ${historyMain.ad!''} 年</option>
                                                   </#if>

                                               <#else >
                                                   <#if historyMain.accuracy == 1>
                                                       <option value="${historyMain.id!''}">约 公元 ${historyMain.ad!''} 年</option>
                                                   <#else >
                                                       <option value="${historyMain.id!''}">公元 ${historyMain.ad!''} 年</option>
                                                   </#if>

                                               </#if>
                                           </#if>
                                       </#list>
                                   </#if>
                               </select>
                           </div>
                       </div>

                       <hr class="layui-bg-orange">

                       <div class="layui-form-item layui-form-text">
                           <label class="layui-form-label">时期名</label>
                           <div class="layui-input-block">
                               <input type="text" name="name" required lay-verify="required" placeholder="请输入名字，比如平安时期，必填" autocomplete="off" class="layui-input">
                           </div>
                       </div>

                       <div class="layui-form-item layui-form-text">
                           <label class="layui-form-label">开始时间</label>
                           <div class="layui-input-block">
                               <input type="text" name="start" required lay-verify="required"  placeholder="请输入开始时间，必填" autocomplete="off" class="layui-input">
                           </div>
                       </div>

                       <div class="layui-form-item layui-form-text">
                           <label class="layui-form-label">结束时间</label>
                           <div class="layui-input-block">
                               <input type="text" name="end" lay-verify="title" autocomplete="off" placeholder="请输入结束时间" class="layui-input">
                           </div>
                       </div>


                       <br/>
                       <br/>


                       <div class="layui-form-item">
                           <div class="layui-input-block">
                               <button class="layui-btn" lay-submit lay-filter="updPeriod">修改</button>
                               <button class="layui-btn layui-btn-danger" type="button" onclick="delPeriod()" >删除</button>
                           </div>
                       </div>

                   </form>
               </div>



           </div>



       </div>
    </div>




</body>


<!-- scripts -->

<#--layui-->
<script src="${request.contextPath}/layui/layui.js"></script>
<#--js-->
<script src="${request.contextPath}/js/jquery.min.js"></script>


<script>






    // 引入弹出层
    var form = null;
    layui.use('form', function(){
        form = layui.form;

        /**
         * 监听提交,修改历史事件
         */
        form.on('submit(updPeriod)', function(data){
            $.ajax({
                url:'/history/other/updPeriod', //请求的url地址
                dataType:'json', //返回的格式
                data: $("#formPeriod").serialize(),//参数值 {"id":"value"}
                type:'post', //请求的方式
                beforeSend:function(){ //请求前的处理
                    console.log("提交的数据:" + JSON.stringify(data.field))
                },
                success:function (req) {
                    if (req != null){
                        if (req.status === "success"){
                            layer.msg(req.msg);
                        } else {
                            layer.msg(req.msg);
                        }
                    } else {
                        console.log(req);
                    }
                },
                error:function (e) {
                    console.log(e);
                    layer.msg("未知错误");
                }
            });

            //返回false则不会重置
            return false;
        });
    });


    /**
     * 根据时期ID搜索时期
     */
    function selectPeriod() {
        var waitId = $("#waitName").val();
        if (waitId === null || waitId === ""){
            layer.msg("请选择待修改的历史时期");
            return;
        }

        //先重置表单
        $('#formPeriod')[0].reset();
        layui.form.render();
        //隐藏域的要手动清空
        $("input[name='id']").val("");

        $.ajax({
            url:'/history/other/selectPeriodById', //请求的url地址
            dataType:'json', //返回的格式
            data: {"id" : waitId},//参数值 {"id":"value"}
            type:'get', //请求的方式
            beforeSend:function(){ //请求前的处理
                console.log("提交的数据:" + waitId)
            },
            success:function (req) {
                if (req != null){
                    if (req.status === "success"){
                        if (req.object != null){
                            layer.msg(req.msg);
                            var period = req.object;

                            //填充数据
                            if (period.id != null){
                                $("input[name='id']").val(period.id);
                            }
                            if (period.name != null){
                                $("input[name='name']").val(period.name);
                            }
                            if (period.start != null){
                                $("input[name='start']").val(period.start);
                            }
                            if (period.end != null){
                                $("input[name='end']").val(period.end);
                            }

                            $("#historyIdStart").find("option[value='" + period.historyIdStart + "']").prop("selected", true);
                            $("#historyIdEnd").find("option[value='" + period.historyIdEnd + "']").prop("selected", true);

                            $("#formPeriod").show();

                        } else {
                            layer.msg("未查询到数据");
                            $("#formPeriod").hide();
                        }


                    } else {
                        layer.msg(req.msg);
                    }
                } else {
                    console.log(req);
                }
            },
            error:function (e) {
                console.log(e);
                layer.msg("未知错误");
            }

        });

    }


    /**
     * 删除 时期
     */
    function delPeriod() {
        var id = $("input[name='id']").val();
        if (id === null || id === ""){
            layer.msg("数据异常，请刷新后重试");
            return;
        }

        layer.confirm('确认是否删除特殊事件合集，注意：删除后不可恢复?', {icon: 3, title:'警告'}, function(index){
            $.ajax({
                url:'/history/other/delPeriod', //请求的url地址
                dataType:'json', //返回的格式
                data: {"id" : id},//参数值 {"id":"value"}
                type:'get', //请求的方式
                beforeSend:function(){ //请求前的处理
                    console.log("提交的数据:" + id)
                },
                success:function (req) {
                    if (req != null){
                        if (req.status === "success"){
                            layer.msg(req.msg);

                        } else {
                            layer.msg(req.msg);
                        }
                    } else {
                        console.log(req);
                    }
                },
                error:function (e) {
                    console.log(e);
                    layer.msg("未知错误");
                }

            });

            layer.close(index);
        });
    }


</script>



</html>